import { source } from '@/lib/source';
import { notFound } from 'next/navigation';
import { ImageResponse } from 'next/og';

export const revalidate = false;

async function loadGoogleFont(font: string, text: string) {
  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
  const css = await (await fetch(url)).text();
  const resource = css.match(
    /src: url\((.+)\) format\('(opentype|truetype)'\)/,
  );

  if (resource) {
    const response = await fetch(resource[1]);
    if (response.status == 200) {
      return await response.arrayBuffer();
    }
  }

  throw new Error('failed to load font data');
}

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ slug: string[] }> },
) {
  const { slug } = await params;
  const page = source.getPage(slug.slice(0, -1));
  if (!page) notFound();

  return new ImageResponse(
    (
      <div tw="relative flex w-full h-full bg-[#0A0A0A]">
        <div tw="absolute left-15 top-0 bottom-0 w-0.5 h-full bg-[#171717]" />
        <div tw="absolute right-15 top-0 bottom-0 w-0.5 h-full bg-[#171717]" />
        <div tw="absolute bottom-15 left-0 right-0 w-full h-0.5 bg-[#171717]" />
        <div tw="absolute top-15 left-0 right-0 w-full h-0.5 bg-[#171717]" />

        <div tw="absolute top-15 left-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
        <div tw="absolute left-15 top-[43.5px] h-[35px] w-0.5 bg-[#404040]" />

        <div tw="absolute bottom-15 left-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
        <div tw="absolute left-15 bottom-[43.5px] h-[35px] w-0.5 bg-[#404040]" />

        <div tw="absolute top-15 right-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
        <div tw="absolute right-15 top-[43.5px] h-[35px] w-0.5 bg-[#404040]" />

        <div tw="absolute bottom-15 right-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
        <div tw="absolute right-15 bottom-[43.5px] h-[35px] w-0.5 bg-[#404040]" />

        <div
          tw="flex flex-col w-full h-full items-start justify-between p-26"
          style={{
            backgroundSize: '100px 100px',
          }}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="#fff"
            viewBox="0 0 4899.14 783.54"
            height="45"
          >
            <path d="M612.79 783.54H227.43c-41.6 0-82.15-11.19-117.26-32.37-32.96-19.88-60.58-48.18-79.88-81.85C10.99 635.66.52 597.52.02 559.03c-.54-41 10.29-81.64 31.32-117.54l192.67-329.07c20.81-35.55 50.62-64.69 86.19-84.28C343.64 9.73 381.64 0 420.11 0s76.47 9.73 109.9 28.14c35.57 19.59 65.38 48.73 86.19 84.28l192.68 329.07c21.02 35.9 31.85 76.55 31.31 117.54-.5 38.49-10.97 76.62-30.27 110.29s-46.92 61.97-79.88 81.85c-35.11 21.18-75.65 32.37-117.26 32.37ZM396.6 213.47 203.92 542.54c-6.59 11.26-3.71 21.06-.13 27.31s10.59 13.69 23.63 13.69h385.36c13.04 0 20.05-7.45 23.63-13.69 3.58-6.25 6.46-16.05-.12-27.31L443.61 213.47c-6.52-11.14-16.38-13.47-23.5-13.47s-16.98 2.34-23.5 13.47ZM1574.55 673.25h112.71l-218.43-546.46h-87.06l-220.76 546.46h111.94l38.89-101.83h224.17zM1345.68 482.8l78.75-206.19 78.04 206.19zM2067.37 364.26c-12.44-22.02-29.42-39.9-50.91-53.64-21.51-13.73-46.25-20.6-74.24-20.6s-54.02 6.22-76.57 18.66c-12.2 6.73-22.94 14.88-32.26 24.42v-35.3h-101.83v375.45h101.83V457.93c0-14.5 3.23-27.59 9.72-39.25q9.705-17.49 26.82-26.82c11.39-6.22 24.35-9.33 38.87-9.33 21.77 0 39.64 7 53.64 20.99s20.99 32.14 20.99 54.41v215.32h102.61V434.61c0-24.88-6.22-48.32-18.66-70.35ZM2204.18 237.17c-16.59 0-30.32-5.56-41.2-16.71-10.88-11.14-16.32-25-16.32-41.59s5.44-29.79 16.32-41.2c10.88-11.39 24.61-17.1 41.2-17.1s30.96 5.71 41.59 17.1c10.62 11.41 15.93 25.14 15.93 41.2s-5.32 30.45-15.93 41.59c-10.63 11.15-24.49 16.71-41.59 16.71m-52.08 436.08V297.8h103.38v375.45zM2902.6 357.65c-13.21-21.77-30.97-38.48-53.25-50.14-22.29-11.66-47.42-17.49-75.4-17.49s-53.38 6.1-76.18 18.27c-18.12 9.68-33.52 22.38-46.24 38.11-11.59-16.2-26.23-29.17-43.93-38.88q-31.875-17.49-70.74-17.49c-27.47 0-52.08 5.83-73.85 17.49-11.67 6.25-22.03 13.9-31.09 22.91V297.8h-101.83v375.45h101.83V452.49c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.03-18.27 25.65-23.71s22.66-8.16 36.15-8.16c20.21 0 37.04 6.1 50.53 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h102.61V452.5c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.02-18.27 25.65-23.71 10.62-5.44 22.93-8.16 36.92-8.16 19.69 0 36.27 6.1 49.75 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h103.38V436.18c0-30.57-6.61-56.75-19.82-78.51ZM3253.56 297.8v35.43c-10.39-10.75-22.56-19.72-36.54-26.88-21.25-10.88-45.08-16.32-71.51-16.32-34.73 0-65.69 8.55-92.89 25.65-27.21 17.1-48.58 40.42-64.13 69.96s-23.32 62.96-23.32 100.28 7.77 69.96 23.32 99.5 36.92 52.86 64.13 69.96 57.91 25.65 92.11 25.65c26.94 0 51.17-5.44 72.68-16.32 13.89-7.03 25.93-15.85 36.15-26.45v35h102.61V297.81h-102.61Zm-20.21 260.4c-17.62 19.18-40.69 28.76-69.18 28.76-18.15 0-34.47-4.4-48.97-13.21-14.51-8.81-25.79-20.72-33.81-35.76-8.04-15.02-12.05-32.65-12.05-52.86s4.01-37.04 12.05-52.08c8.03-15.02 19.17-26.94 33.43-35.76 14.25-8.81 30.71-13.21 49.36-13.21s35.76 4.28 49.75 12.83 25.13 20.6 33.43 36.15c8.28 15.55 12.44 33.17 12.44 52.86 0 29.03-8.82 53.13-26.43 72.29ZM3674.09 297.8h-87.84V141.55h-101.83V297.8h-87.84v89.39h87.84v286.06h101.83V387.19h87.84zM4049.53 380.2c-15.55-28.49-37.31-50.78-65.3-66.85-27.98-16.06-59.6-24.1-94.83-24.1-37.31 0-71 8.55-101.05 25.65q-45.09 25.65-71.13 69.96c-17.37 29.54-26.04 62.96-26.04 100.28s8.81 71.51 26.43 101.05c17.61 29.54 41.84 52.86 72.68 69.96q46.245 25.65 105.33 25.65c30.57 0 58.81-5.44 84.73-16.32 25.91-10.88 48.45-27.21 67.63-48.97l-60.63-60.63c-11.4 13.48-24.87 23.32-40.42 29.54s-32.92 9.33-52.08 9.33c-21.25 0-39.91-4.4-55.97-13.21-16.07-8.81-28.37-21.63-36.92-38.48-3.4-6.69-6.11-13.85-8.15-21.48l274.39-.67c2.06-8.28 3.36-15.93 3.89-22.93.51-7 .78-13.86.78-20.6 0-36.27-7.77-68.66-23.32-97.17Zm-213.76 7.77c15.02-8.81 32.65-13.21 52.86-13.21 19.17 0 35.24 3.89 48.2 11.66 12.95 7.77 23.05 19.18 30.32 34.2 3.49 7.23 6.19 15.32 8.12 24.23l-181.45.52c1.88-6.99 4.34-13.56 7.37-19.7 8.03-16.32 19.55-28.88 34.59-37.7ZM4484.04 681.8c-43.02 0-81.36-9.58-115.05-28.76-33.69-19.17-60.24-45.34-79.68-78.51-19.43-33.16-29.15-70.74-29.15-112.71V126.78h106.49v338.14c0 24.36 5.17 45.35 15.55 62.96 10.36 17.62 24.35 31.23 41.98 40.81 17.61 9.59 37.57 14.38 59.85 14.38s41.84-4.79 58.69-14.38c16.83-9.58 30.32-23.19 40.42-40.81 10.1-17.61 15.16-38.34 15.16-62.19V126.78h106.5v335.81c0 41.98-9.46 79.42-28.37 112.33q-28.38 49.38-78.12 78.12c-33.17 19.18-71.26 28.76-114.27 28.76M4793.42 673.25V126.78h105.72v546.46h-105.72Z"></path>
          </svg>

          <div tw="flex flex-row gap-10 w-full justify-between items-end">
            <div tw="flex flex-col">
              <p
                tw="text-white text-6xl font-medium mb-0"
                style={{ fontFamily: 'Outfit' }}
              >
                {page.data.title}
              </p>
              {page.data.description && (
                <p
                  tw="text-white/60 text-2xl mt-6 -mb-2 max-w-2xl"
                  style={{ fontFamily: 'Outfit' }}
                >
                  {page.data.description}
                </p>
              )}
            </div>

            <div tw="flex ml-6">
              <p
                tw="text-white/80 text-2xl -mb-2"
                style={{ fontFamily: 'Outfit' }}
              >
                animate-ui.com
              </p>
            </div>
          </div>
        </div>
      </div>
    ),
    {
      fonts: [
        {
          name: 'Outfit',
          data: await loadGoogleFont(
            'Outfit',
            `${page.data.description} ${page.data.title} animate-ui.com`,
          ),
          style: 'normal',
        },
      ],
    },
  );
}

export function generateStaticParams(): {
  slug: string[];
}[] {
  return source
    .generateParams()
    .filter((page) => {
      const pageData = source.getPage(page.slug);
      return pageData !== null && pageData !== undefined;
    })
    .map((page) => ({
      ...page,
      slug: [...page.slug, 'image.png'],
    }));
}
